<template>
  <div class="order-admin">
    <div class="switch-add" @click="handleExchange">
      <span class="uname" 
        >就诊人：{{usernamer}}
        <van-button type="primary" size="mini" plain>切换</van-button></span
      >
    </div>

    <van-tabs v-model="active" color="#4ECE40" @change="handleChange" >
      <van-tab v-for="(item,index) in tabList" :key="index" :title="item.label" :name="item.value"></van-tab>
    </van-tabs>

    <div class="order-container subscribe-wrapper"  v-if="orderList.length > 0">
      <van-panel v-for="(item,index) in orderList" :key="index">
        <template #header>
          <van-cell :title="item.organ_name" :icon="`${staticPath}/logo@2x.png`" :value="item.state" @click="handleDetail(item.id)" />
        </template>
        <div class="order-product" @click="handleDetail(item.id)">
          <div class="order-product-hd">
            <img :src="item.picurl" alt="" />
          </div>
          <div class="order-product-bd">
            <h2>
              {{item.check_name}}
            </h2>
            <p>预约类型：{{item.type == 1 ? '个人预约' : '单位预约'}}</p>
            <p>预约人：{{item.user_people}}</p>
            <p>预约时间：{{item.user_time}}</p>
            <!-- <div class="order-text">
              <span class="order-text-hd price">￥{{item.price}}</span>
            </div> -->
          </div>
        </div>
        <template #footer>
          <div style="display:flex;justify-content: flex-end" v-if="item.state == '已预约'">
            <van-button size="small" round @click="handleRefail(item)">取消预约</van-button>
          </div>
        </template>
      </van-panel>
      <div class="pagination">
        <van-pagination v-model="currentPage" @change="handlePage" :items-per-page="20" :page-count="pageCount" mode="simple" />
      </div>
    </div>

    <van-empty description="暂无数据" v-else />

    <van-dialog v-model="show" title="选择就诊人" show-cancel-button @confirm="handleConfirm" theme="round-button">
      <div class="min-wrapper">
        <van-radio-group v-model="radio" @change="handleRadio">
          <van-radio :name="item.id" v-for="(item,index) in memberArrList" :key="index" checked-color="#4ECE40">{{item.name}}</van-radio>
        </van-radio-group>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { ucenterCheckLogs,ucenterCheckLogsOption,ucenterCheckLogsPutInfo } from '@/service/order';
import { memberList,memberDefaultService } from "@/service/server";
export default {
  data() {
    return {
      active: "1",
      radio: localStorage.getItem('userId2') || '',
      show: false,
      tabList: [],
      currentPage:1,
      pageCount: 0,
      orderList: [],
      memberArrList: [],
      memberDefault:{},
      usernamer: localStorage.getItem('usernamer') || '',
      staticPath: process.env.VUE_APP_STATIC_PATH
    };
  },

  components: {},

  computed: {},

  created(){
    this.queryOrderOption();
    let user_id = localStorage.getItem('userId2')
    if(!user_id){
      this.queryMemberDefault();
    }else{
      this.radio = Number(user_id)
      this.queryOrderList({
        state: 1,
        user_id: user_id,
        currentPage: this.currentPage
      })
    }
    this.queryMemberList();
    
  },

  methods: {
    async queryMemberDefault(){
      let result = await memberDefaultService();
      if(result.status == 200){
        this.memberDefault = result.data
        this.radio = result.data.id;
        this.usernamer = result.data.name
        let params = {
          state: 1,
          currentPage: this.currentPage,
          user_id: result.data.id
        }
        this.queryOrderList(params)
      }else{
        this.$toast(result.message)
      }
    },
    handleExchange(){
      this.memberArrList.length > 0 && (this.show = true)
    },
    handleRadio(name){
      console.log(name,'handleRadio')
      this.radio = name
      localStorage.setItem('userId2', name)
    },
    handleConfirm(){
      this.show = false
      this.usernamer = this.memberArrList.length > 0 ? this.memberArrList.filter(item => item.id == this.radio)[0].name : this.memberDefault.username
      localStorage.setItem('usernamer2', this.usernamer)
     let params = {
          state: this.tabList.filter(item => item.value == this.active)[0].value,
          currentPage: this.currentPage,
          user_id: this.radio
        }
        this.queryOrderList(params)
    },
    async queryMemberList() {
      let result = await memberList();
      if (result.status == 200) {
        this.memberArrList = result.data.model;
      } else {
        this.$toast(result.message);
      }
    },
    handleDetail(id){
      this.$router.push({
        path: `/user/subscribe/detail/${id}`
      })
    },
    handleRefail(item){
      this.$dialog.confirm({
        title: '提示',
        message: '确定取消预约吗？',
      })
        .then( async() => {
          let params = {
            id: item.id,
            state: 2
          }
          let result = await ucenterCheckLogsPutInfo(params,item.id)
          if(result.status == 200 || result.status == 204){
            this.$toast('取消成功')
            let params = {
              state: 1,
              currentPage: this.currentPage,
              user_id: this.radio
            }
            this.queryOrderList(params)
          }else{
            this.$toast(result.message)
          }
        })
    },
    handleChange(e){
      this.active = e
      let params = {
        state: this.tabList.filter(item => item.value == e)[0].value,
        currentPage: this.currentPage,
          user_id: this.radio
      }
      this.queryOrderList(params)
    },
    async queryOrderOption(){
      let result = await ucenterCheckLogsOption();
      if(result.status == 200){
        this.tabList = result.data
      }
    },
    async queryOrderList(params){
      let result = await ucenterCheckLogs(params);
      if(result.status == 200){
        this.orderList = result.data.model;
        this.pageCount = result.data._meta.pageCount
      }
    },
    handlePage(e){
      this.currentPage = e
      let params = {
          state: this.tabList.filter(item => item.value == this.active)[0].value,
          currentPage: this.currentPage,
          user_id: this.radio
        }
        this.queryOrderList(params)
    }
  },
};
</script>
<style lang='less'>
@import '~@/assets/less/mixin';
.order-container{
  min-height: 100%;
  background: #f5f5f5;
  padding: 15px;
}
.min-wrapper{
  min-height: 100px;
  padding: 12px 15px;
  .van-radio{
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 5px;
  }
}
.subscribe-wrapper{
  padding: 15px;
  .van-panel{
    margin-bottom: 15px;
  }
  .van-cell{
    background: #fff;
  }
}
.order-admin {
  // background: #f5f5f5;
  height: 100%;
  .switch-add {
    background: #EDFFEB;
    color: #4ECE40;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-button{
      margin-left: 10px;
      background: transparent;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: auto;
    }
    .uname{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .order-container {
    .order-product {
      padding: 15px;
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      justify-content: space-around;
    }

    .order-product-hd {
      margin-right: 0.8em;
      width: 70px;
      height: 70px;
      line-height: 70px;
      text-align: center;
    }

    .order-product-hd img {
      width: 100%;
      max-height: 100%;
      vertical-align: top;
      border-radius: 5px;
    }

    .order-product-bd {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      min-width: 0;
      p{
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
    .price{
      color: coral;
    }
    .order-product-bd h2 {
      font-weight: 400;
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 5px;
      color: #333;
      width: auto;
    }
  }
}
</style>